<template>
  <div class="gonggao">
    <i class="iconfont icon-gonggao"></i>
    <span>{{ $t('公告') }}：</span>
    <div>
      <p><a v-for="item in list" :key="item.id" :href="item.url.substr(0, 4) === 'http' ? item.url : '#'">{{ item.title }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></p>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      list: []
    }
  },
  beforeMount () {
    this.getCateList()
  },
  methods: {
    ...mapActions({
      getCate: 'user/getCate'
    }),
    getCateList (page) {
      const payload = {
        id: 6,
        limit_num: 4,
        limit_begin: 0
      }
      this.getCate(payload)
        .then((data) => {
          this.list = data.data
        })
    }
  }
}
</script>
<style scoped>
.gonggao {
  width: 96%;
  padding: 0 2%;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  border-bottom: 5px solid #f0f3f8;
}
.gonggao i {
  float: left;
  color: #828f9f;
  margin: 0 5px 0 0;
}
.gonggao span {
  width: auto;
  float: left;
}
.gonggao div {
  width: auto;
  float: left;
  max-width: 80%;overflow: hidden;
}
.gonggao p {
  animation: slides 15s linear infinite;
  white-space: nowrap
}

.gongao a {display: inline-block;}

@keyframes slides {
  from {transform: translateX(100vw);}
  to {transform: translateX(-100%);}
}

</style>
